[小ネタ] VSCodeの拡張機能にQuokka.jsを入れたらとても便利だった

Javascriptを学習しているとき、なんらかのチュートリアルを行なっている時、プロトタイピングを行なっているときなど、 書いたコードの動きや値をちょっと確認したいときがあります。

そういった場合に非常に有用なQuokka.jsというのを教えてもらったので試してみました。

主な特徴は、

JavaScriptとTypeScriptを瞬時にフィードバックしながら実行します。ランタイムの値が更新され、入力中のコードの横にエディタに表示されます

といったことです。

始めるのに設定などは必要なく、エディタでQuokkaファイルを開きコードを書いていくだけです。

VSCode, JetBrains IDE, Atom, SublimeTextといったエディタの拡張機能が提供されています。

install

VSCodeにインストールしてみました。

拡張機能の画面を開いて,quokkaと検索製て一番上に出てくるものをクリックし、インストールボタンを押すだけでインストールは完了です。

動かしてみる

JavascriptのPLAYGROUNDを起動してみましょう。

（Win)Ctrl/(Mac)Cmd + Shift + pを押してVSCodeのコマンドパレットを起動し、Quokkaと入力して使用できるコマンド一覧を表示させます。

New Javascript Fileのコマンドを選んで実行します。

なお、（Win)Ctrl/(Mac)Cmd + k, j というショートカットも用意されていました。

コマンド実行後、Quokkaのエディタが起動します。

簡単なコードを入力してみる

エディタにコードを入力してみましょう。

このように定義した変数の中身が表示されたり、エラー内容が表示されます。 しかもリアルタイムです。

関数を定義し、実行結果も確認できます。

(Proライセンス) Packageのインストール

Pro版のライセンスがあると、nodeパッケージをインストールできました。

コンソールに移動することなくエディタ上からインストールでき、アクティブなQuokkaセッション or プロジェクト全体にインストールするかを選択できます。

最後に

エディタ上でjavascriptのPlaygroundを導入できるQuokka.jsを使ってみました。

言われている通り、開発効率をあげることができる一つの手段として使えるのではないでしょうか。

私はちょっとしたプロトタイプやチュートリアルの実行をして学習することが多いのでとても助かる拡張機能でした。

社内用Podcastサイトの作成が捗るはず。。。

※ 実際のプロジェクトに導入する際はProライセンスを検討したほうがいいかもしれません(Packageのインストールが便利だった)

ライセンスによる機能比較